<style lang="scss" scoped>
// 轮播页面 资讯
.sns-news {
  height: 100%;
  .header {
    margin-top: calc(150upx + var(--status-bar-height));
    width: 750upx;
  }
  .swiper {
    height: 460upx;
    text-align: center;
    .banner-swiper-img {
      border-radius: 20upx;
      width: 700upx;
      height: 400upx;
      box-shadow: 0 0 5px 0 rgb(188, 188, 188);
    }
  }

  .one-new {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    width: 750upx;
    height: 200upx;
    padding-bottom: 20upx;
    padding-top: 20upx;
    border-bottom: 1upx solid #f2f2f2;

    .left {
      width: 200upx;

      .pic {
        width: 140upx;
        height: 140upx;
        margin-top: 10upx;
        border-radius: 10upx;
        box-shadow: 0 0 5px 0 rgb(228, 228, 228);
      }
    }

    .right {
      width: 520upx;
      margin-right: 25upx;
      text-align: left;

      .title {
        font-size: 28upx;
        line-height: 40upx;
        height: 80upx;
      }

      .uinfo {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin-top: 16upx;
        font-size: 20upx;
        color: #666;
        padding: 0 10upx;

        .iview {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          align-content: center;
        }

        .avatar {
          margin-right: 10upx;
          height: 40upx;
          width: 40upx;
          border-radius: 50%;
          border: 1upx solid #eee;
        }
        .utime {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
          align-content: center;
          font-size: 20upx;
          .name {
            max-width: 120upx;
            margin-top: -4upx;
          }
        }
        .comment-count {
          margin-left: 10upx;
          margin-right: 20upx;
        }

        .love-count {
          margin-left: 10upx;
        }
      }
    }
  }
}
</style>
<template>
  <scroll-view class="sns-news" scroll-y @scrolltolower="onreachBottom" :show-scrollbar="false">
    <view class="header" />
    <swiper
      class="swiper"
      :indicator-dots="true"
      indicator-color="rgba(0,0,0,0.2)"
      indicator-active-color="#007cba"
      :autoplay="true"
      :interval="2500"
      :duration="500"
    >
      <swiper-item v-for="item in findBannerSwiperList" :key="item.id">
        <navigator
          v-if="item.type == 'normal' "
          open-type="navigate"
          :url=" '/pages/webview?url='+item.linkid "
        >
          <image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
        </navigator>
        <navigator v-else open-type="navigate" :url=" '/feed/'+item.type +'?id=' + item.linkid ">
          <image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
        </navigator>
      </swiper-item>
    </swiper>

    <view v-for="(item, index) in infoList" :key="index">
      <navigator open-type="navigate" :url=" '/feed/info?id=' + item.id " class="one-new">
        <view class="left">
          <image
            class="pic"
            mode="aspectFill"
            :src=" item.cover ?  item.cover.url : item.medias[0].image.url "
          />
        </view>
        <view class="right">
          <view class="title u-line-2">{{item.title}}</view>
          <view class="uinfo">
            <view class="iview">
              <!-- <u-avatar size="40" class="avatar" :src="item.user.avatar" /> -->

              <image
                class="avatar"
                v-if="!!item.user.avatar"
                :src=" item.user.avatar.url ? item.user.avatar.url  : item.user.avatar  "
              />
              <image class="avatar" v-else src="@/static/ilogo.png" />

              <view class="utime">
                <text class="name">{{ item.user.name }}</text>
                <text class="uptime">{{ item.created_at | timeFormate }}发布</text>
              </view>
            </view>
            <view class="iview">
              <u-icon name="eye-fill" color="#666" size="28" />
              <text class="comment-count">{{ item.views_count }}</text>
              <u-icon name="chat-fill" color="#666" size="28" />
              <text class="love-count">{{ item.comments_count }}</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
import timeFrom from "../../uview-ui/libs/function/timeFrom.js";
export default {
  data() {
    return {
      // 记录 发现页面 banner 轮播列表信息
      findBannerSwiperList: [],
      // 新闻资讯列表
      infoList: [],
      // 记录请求 feed 状态
      canRequestInfos: "yes",
    };
  },
  async created() {
    // 获取顶部 banner
    let swiperList = await this.$u.api.getAdverbanner({
      space: "1,2,3",
    });
    let useSwiperList = [];
    for (let i = 0; i < swiperList.length; i++) {
      if (!!swiperList[i].data.link) {
        if (swiperList[i].data.link.indexOf("feed") > -1) {
          swiperList[i].type = "feed";
          swiperList[i].linkid = swiperList[i].data.link.split(":")[1];
        } else if (swiperList[i].data.link.indexOf("info") > -1) {
          swiperList[i].type = "info";
          swiperList[i].linkid = swiperList[i].data.link.split(":")[1];
        } else {
          swiperList[i].type = "normal";
          swiperList[i].linkid = encodeURIComponent(swiperList[i].data.link);
        }
        useSwiperList.push(swiperList[i]);
      }
    }
    this.findBannerSwiperList = useSwiperList;

    // 获取 咨询信息列表
    this.infoList = await this.$u.api.getInfos({
      limit: 8,
      offset: 0,
    });
    console.log(this.infoList);
  },
  filters: {
    timeFormate(timeDate) {
      let Time = new Date(timeDate);
      let timestemp = Time.getTime();
      let t = timeFrom(timestemp, "yyyy年mm月dd日");
      return t;
    },
  },
  methods: {
    // scroll-view到底部加载更多
    onreachBottom() {
      console.log("滚动到底部了！");
      if (this.canRequestInfos == "yes") {
        uni.showToast({
          title: "请求中...",
          icon: "loading",
          duration: 10000,
        });
        this.canRequestInfos = "no";
        this.$u.api
          .getInfos({
            limit: 8,
            offset: this.infoList.length,
          })
          .then((infos) => {
            uni.hideToast();
            if (infos.length > 0) {
              this.infoList = [...this.infoList, ...infos];
              let timer = setTimeout(() => {
                clearTimeout(timer);
                this.canRequestInfos = "yes";
              }, 500);
            } else {
              this.canRequestInfos = "end";
              uni.showToast({
                title: "到底啦！",
                icon: "success",
                duration: 1000,
              });
            }
          });
      }
      if (this.canRequestInfos == "end") {
        uni.hideToast();
        uni.showToast({
          title: "到底啦！",
          icon: "success",
          duration: 1000,
        });
      }
    },
  },
};
</script>
